import React from 'react';
import './index.less';
import {render} from 'ader';


export default render()(({props, state, action}) => {
    const {
        itemConfig, 
        deleteComponent, 
        mouseDown, 
        active, 
        setStyle, 
        style,
        zIndex
    } = props;

    return (
        <div 
            className={`component-wrapper`}
            style={{
                top: itemConfig.position.top,
                left: itemConfig.position.left,
                zIndex: zIndex
            }}
        >
            <div 
                className={`component-toolbar${active ? ' active-wrapper' : ''}`}
                onMouseDown={mouseDown(itemConfig)}
            >
                <span 
                    onClick={deleteComponent(itemConfig)}
                >
                    删除
                </span>
                <span
                    onClick={setStyle}
                >
                    设置
                </span>
            </div>
            {props.children}
        </div>
    );
});